<template>
  <div>
    <el-tree
      :data="data"
      node-key="id"
      ref="selectTree"
      :expand-on-click-node="true"
      :highlight-current="true"
      :default-expand-all="false"
      :current-node-key="highlightedNodeId"
      :default-checked-keys="highlightedNodeId ? [highlightedNodeId] : []"
      :default-expanded-keys="highlightedNodeId ? [highlightedNodeId] : []"
      @node-click="handleClick"
    >
      <div class="custom_tree_node" slot-scope="{ data }">
        <template>
          <div style="display: flex; align-items: center; width: 100%">
            <div class="state" v-if="data.type == 3 || data.type == 4">
              <div
                class="state_icon"
                :style="{ left: data.examId ? '-20px' : '0px' }"
              >
                <div class="StudyPercent">
                  <RoundSvg
                    :percentage="data.classStudyPercent"
                    v-if="data.classStudyStatus != 2"
                  ></RoundSvg>
                  <div v-else style="color: #4ea685">
                    <i class="el-icon-success"></i>
                  </div>
                </div>
                <div
                  class="exam_icon"
                  v-if="
                    data.examId &&
                    data.submitType == 1 &&
                    !data.leaderScorePercent
                  "
                >
                  考
                </div>
                <!-- <div
                  class="leader_icon"
                  v-if="
                    data.homeworkId &&
                    data.homeworkSubmitType == 1 &&
                    !data.homeworkLeaderScorePercent
                  "
                >
                  作
                </div> -->
                <div
                  class="exam_icon"
                  v-if="
                    data.examId &&
                    (data.submitType == 2 ||
                      (data.submitType == 1 && data.leaderScorePercent > 0))
                  "
                >
                  组
                </div>
                <!-- <div
                  class="leader_icon"
                  v-if="
                    data.homeworkId &&
                    (data.homeworkSubmitType == 2 ||
                      (data.homeworkSubmitType == 1 &&
                        data.homeworkLeaderScorePercent > 0))
                  "
                >
                  组
                </div> -->
              </div>
            </div>
            <div v-if="!data.showRename" class="label">
              {{ data.name }}
            </div>
            <div @click.stop="" v-if="data.showRename" class="label">
              <el-input
                clearable
                size="small"
                oninput="value=value.replace(/\//g, '')"
                ref="resetName"
                v-model="data.name"
                placeholder="请输入名称"
                style="width: 100%"
              />
            </div>
          </div>
          <div class="flex_center">
            <div
              class="must_learn"
              v-if="
                data.mustLearnStatus == 1 && (data.type == 3 || data.type == 4)
              "
            >
              必学
            </div>
            <div
              class="choose_learn"
              v-if="
                data.mustLearnStatus == 2 && (data.type == 3 || data.type == 4)
              "
            >
              选学
            </div>
          </div>
        </template>
      </div>
    </el-tree>
  </div>
</template>

<script>
import RoundSvg from '@/components/roundSvg.vue'

export default {
  name: 'courseTrees',
  data() {
    return {
      oldName: '',
      // 新增
      highlightedNodeId: '',
      selectId: '',
      selectData: '',
      dataList: [],
      showDelete: false,
      showSecLoading: false,
      showSecDelete: false,
      studyStatus: {
        0: '未开始',
        1: '进行中',
        2: '已完成'
      }
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    type: {
      type: String,
      default: ''
    },
    exceptionType: {
      type: String,
      default: ''
    },
    isClose: {
      type: Boolean,
      default: false
    },
    activeNode: {
      type: Object,
      default: {}
    }
  },
  components: { RoundSvg },
  watch: {
    data(val, oldVal) {
      if (oldVal.length == 0) {
        if (val.length > 0) {
          this.$nextTick(() => {
            this.$refs.selectTree.setCurrentKey(this.highlightedNodeId)
            this.$emit('handleClick', this.activeNode)
          })
        }
      } else {
        if (this.highlightedNodeId) {
          this.$nextTick(() => {
            this.$refs.selectTree.setCurrentKey(this.highlightedNodeId)
          })
        }
      }
      if (this.isClose) {
        this.expandAll()
      }
    },
    isClose(val) {
      if (val) {
        this.expandAll()
      } else {
        this.collapseAll()
      }
    },
    activeNode: {
      handler(val) {
        if (val) {
          this.highlightedNodeId = val.id
        }
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick(data) {
      this.$emit('handleClick', data)
    },
    expandAll() {
      this.$nextTick(() => {
        this.expandAllNodes(this.$refs.selectTree.store.root)
      })
    },
    collapseAll() {
      this.$nextTick(() => {
        this.collapseAllNodes(this.$refs.selectTree.store.root)
      })
    },
    expandAllNodes(node) {
      if (node) {
        node.expanded = true
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.expandAllNodes(childNode)
          })
        }
      }
    },
    collapseAllNodes(node) {
      if (node) {
        node.expanded = false
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.collapseAllNodes(childNode)
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(5, 192, 173, 0.08);
}

.custom_tree_node {
  width: calc(100% - 66px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 0 0;
  box-sizing: border-box;

  .state {
    position: relative;

    .state_icon {
      width: 60px;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      position: absolute;
      top: -8px;
      left: -40px !important;

      .StudyPercent {
        //background: #1ab394;
        //overflow: hidden;
        width: 16px;
        height: 16px;
        margin-right: 4px;
        display: flex;
        align-items: center;
      }

      .exam_icon {
        width: 16px;
        height: 16px;
        background: #fa6400;
        border-radius: 3px;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 4px;
      }

      .leader_icon {
        width: 16px;
        height: 16px;
        background: #4e8dff;
        border-radius: 3px;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 4px;
      }
    }
  }

  .flex_center {
    display: flex;
    align-items: center;

    .must_learn {
      color: rgb(40, 178, 139);
      background: rgb(196, 236, 226);
      width: 40px;
      height: 16px;
      border-radius: 8px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .choose_learn {
      color: rgb(44, 172, 255);
      background: rgb(213, 238, 255);
      width: 40px;
      height: 16px;
      border-radius: 8px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn {
      width: 20px;
      height: 20px;
      overflow: hidden;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .more {
        width: 18px;
        height: 12px;
      }
    }
  }

  .label {
    width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 20px;
  }
}

::v-deep .el-tree-node__content {
  height: 40px;
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  font-weight: bold;
}

.delete_content {
  .datalist_tree {
    width: 100%;
    height: calc(100vh - 430px);
    overflow: auto;
  }
}
</style>
